<template>
	<div class="map_main">
		<div class="map_b" v-for="b in builds" :class="b" :title="b" @click="hOnFn(b)">
			<img :src="`imgs/map/${b}.png`" />
		</div>
	</div>
</template>

<script setup>
	import {
		onMounted, //页面初始化
		onUnmounted, //页面卸载
		nextTick,
		computed,
		reactive,
		watch, //监控
		ref, //
		toRefs
	} from "vue";


	//事件抛出
	//外层绑定@onFn="hOnFn"
	const emit = defineEmits(['call', 'onUnSave']);
	//触发
	const hOnFn = (t) => {
		emit('call', t);
	}

	const hFn = () => {

	}
	//属性导出
	//使用方法 ref="rdom" rdom.value.hFn()
	defineExpose({
		hFn
	});


	//属性定义
	//数据绑定v-bind:dat="dat"  	 
	const props = defineProps({
			dat: {
				type: Object
			},
		}),
		builds = ["A", "E",
			"Q", "R",
			"W",
		];




	onMounted(() => nextTick(() => {

	}));
	onUnmounted(() => {

	})
</script>

<style scoped lang="scss">
	.map_main {
		width: 100%;
		height: 100%;
		pointer-events: all;
		background-image: url(/imgs/map/main.png);
		background-size: 100% 100%;
		background-position: center;
		box-shadow: 0 0 3px 6px #093e76;
		border-radius: 10px;

		>div {
			cursor: pointer;
		}
	}

	.map_b {
		position: absolute;

		img {
			width: 100%;
			height: 100%;
			display: none;
		}
	}

	.map_b:hover {
		img {
			display: block;
		}
	}

	.map_main:has(>.shixunlou_7:hover) {

		background-image: url(/imgs/map/bg.png), url('/imgs/map/保安亭-0 .png');
		background-size: 100% 100%;
		background-position: center, center;
	}

	.A {
		width: 575px;
		height: 200px;
		transform: translate(222px, 50px);

	}

	.R {
		width: 215px;
		height: 120px;
		transform: translate(170px, 210px);
	}

	.W {
		width: 215px;
		height: 110px;
		transform: translate(445px, 230px);
	}

	.E {
		width: 245px;
		height: 145px;
		transform: translate(120px, 300px);
	}

	.Q {
		width: 226px;
		height: 150px;
		transform: translate(436px, 330px);
	}





	.map_main:has(>.W:hover) {}
</style>

<style module>
	/**
	 * 类名会被打乱
	 *绑定方法   :class="[$style.fullscreen]"
	 *申明 .fullscreen 
   */
</style>